<template>
    <div class="loading">
        <div class="load-icon">
            <p class="iconfont icon-shunshizhenxuanzhuan"></p>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
    @keyframes rotateAnimate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0rem;
        left: 0rem;
        background: #fff;
        z-index: 98;
    }

    .load-icon {
        width: 10rem;
        height: 10rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 0.5rem;
        background: rgba(61, 61, 61, 0.5);

        >p {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 10rem;
            font-size: 5rem;
            color: rgb(255, 255, 255);
            animation: rotateAnimate infinite linear 3s;
        }
    }

</style>